import {
  Button,
  message,
  Form,
  DatePicker,
  Upload,
  Modal,
  Row,
  Col,
  Input,
  Popconfirm,
  Select,
} from 'antd';
import React, { useState, useRef, useEffect } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import type { ProColumns, ActionType } from '@ant-design/pro-table';

import ProTable from '@ant-design/pro-table';
import '@/assets/css/index.less';

import moment from 'moment';
import { getBlackList, getPageList } from '@/services/ipmanager';
import {SearchOutlined, UndoOutlined} from "@ant-design/icons";
const { RangePicker } = DatePicker;

const formLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
};
const BlacklistConfig: React.FC = () => {
  const [form] = Form.useForm();

  const _initSearchForm = () => {
    return (
      <div className="ant-pro-table-search ant-pro-table-search-query-filter">
        <Form
          form={form}
          className="ant-form ant-form-horizontal ant-pro-form-query-filter"
          layout="inline"
        >
          <Row style={{ width: '100%' }}>
            <Col span={4}>
              <Form.Item name="relateType">
                <Select
                  onChange={() => queryData()}
                  placeholder="请选择类型"
                  options={[
                    {
                      label: '全部类型',
                      value: 'all',
                    },
                    {
                      label: '系统网站',
                      value: 'system',
                    },
                    {
                      label: ' 资讯',
                      value: 'topic',
                    },
                  ]}
                ></Select>
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item label="IP" name="ip">
                <Input onChange={() => queryData()} placeholder="请输入IP" />
              </Form.Item>
            </Col>

            <Col span={8}>
              <Form.Item label="操作时间" name="dateTime">
                <RangePicker onChange={() => queryData()} />
              </Form.Item>
            </Col>

            <Col
              span={8}
              className="basic-search-form-submit-btn"
              style={{ display: 'flex', justifyContent: 'flex-end' }}
            >
              <Button
                onClick={() => {
                  form.resetFields();
                  queryData();
                }}
              >
                <UndoOutlined />

                重置
              </Button>
              &nbsp;&nbsp;
              <Button type="primary" htmlType="submit" onClick={() => queryData()}>
                <SearchOutlined />
                查询
              </Button>
            </Col>
          </Row>
        </Form>
      </div>
    );
  };
  const actionRef = useRef<ActionType>();
  const [currentValue, setCurrentValue] = useState();
  const [page, setPage] = useState(1);
  const [total, setTotal] = useState(40);
  const [dataArray, setDataArray] = useState([]);
  const [pageSize, setPageSize] = useState(10);
  const [pagination, setPagination] = useState({
    current: page,
    pageSize: pageSize,
    position: ['bottomRight'],
    size: 'small',
    showSizeChanger: true,
    total: total,
  });
  useEffect(() => {
    queryData();
  }, [page, pageSize]);
  const handleTableChange = (pagination: any) => {
    setPagination(pagination);
    setPage(pagination.current);
    setPageSize(pagination.pageSize);
  };
  const queryData = async () => {
    let values = form.getFieldsValue();
    if (values.relateType === 'all') {
      delete values.relateType;
    }
    if (values.dateTime != null && values.dateTime != undefined) {
      values.timeStart = moment(values.dateTime[0]).format('YYYY-MM-DD') + ' 00:00:00';
      values.timeEnd = moment(values.dateTime[1]).format('YYYY-MM-DD') + ' 23:59:59';
    }

    const params = {
      page: page,
      pageSize: pageSize,
    };

    const msg = await getPageList(params, values);
    setDataArray(msg.data.whiteList);
    setPagination({ ...pagination, total: msg.data.total });
  };
  const columns: ProColumns[] = [
    {
      title: '限制IP',
      align: 'center',
      hideInSearch: true,
      dataIndex: 'ip',
    },
    {
      title: '限制类型',
      align: 'center',
      hideInSearch: true,
      dataIndex: 'relateType',
    },

    {
      title: '内容',
      align: 'center',
      hideInSearch: true,
      dataIndex: 'relateTitle',
    },
    {
      title: '添加时间',
      align: 'center',
      hideInSearch: true,
      dataIndex: 'createdTime',
    },
    {
      title: '添加人',
      align: 'center',
      hideInSearch: true,
      dataIndex: 'createdBy',
    },
  ];
  return (
    <PageContainer>
      {_initSearchForm()}
      <ProTable
        search={false}
        // headerTitle="视媒管理"
        actionRef={actionRef}
        rowKey="id"
        tableStyle={{ textAlign: 'center' }}
        options={false}
        pagination={pagination}
        dataSource={dataArray}
        onChange={handleTableChange}
        columns={columns}
        // rowSelection={{
        // onChange: (_, selectedRows) => {
        //     setSelectedRows(selectedRows);
        // },
        // }}
      ></ProTable>
    </PageContainer>
  );
};
export default BlacklistConfig;
